<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
   1. observe()方法
    - 监听某个节点属性的变化
        - 参数
            - 第一个  MutationRecord
            - 第二个  MutationObserver
 */

    // 1.1 基本使用
    let observer = new MutationObserver((mutations, mObserver) => {
        console.log('MutationRecord', mutations)
        console.log('MutationObserver', mObserver)
        console.log('body元素上面的元素变化了')
    })
    observer.observe(document.body, {
        attributes: true
    })
    setTimeout(() => {
        document.body.className = 'foo'
    }, 1000)
    console.log('changed body calss')

    /*
        第24行的属性,可以选择如下的属性
        subtree:   boolean(false)   false:只观察目标节点,true:目标节点+子树
        attributes: boolean(false)  是否观察目标节点的属性变化
        attributeFilter: 字符串数组,表示要观察那些属性的变化,默认观察所有
        attributeOldValue: boolean(false): 布尔值，表示 MutationRecord 是否记录变化之前的属性值把这个值设置为 true 也会将 attributes 的值转换为 true默认为 false
        characterData:          布尔值，表示修改字符数据是否触发变化事件  默认为 false
        characterDataOldValue   布尔值，表示 MutationRecord 是否记录变化之前的字符数据 把这个值设置为 true 也会将 characterData 的值转换为 true 默认为 false 
        childList               布尔值，表示修改目标节点的子节点是否触发变化事件,默认为false

     */

    /*
        1.观察属性
     */
    let observer2 = new MutationObserver(
        (mutationRecords) => console.log('记录变化:',mutationRecords));  // [MutationRecord,MutationRecord,MutationRecord]
    observer2.observe(document.body, {attributes: true});
    // 添加属性 
    document.body.setAttribute('foo', 'bar');
    // 修改属性 
    document.body.setAttribute('foo', 'baz');
    // 移除属性 
    document.body.removeAttribute('foo');

    
    /*
        下面的例子都是对上面属性的应用举例
     */
</script>
</body>
</html>